<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #div1{
                background-color: red;
                color:blue;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div id="div1" style="width: 400px;height: 300px;margin-top: 20px;">TODO write content</div>
        <div id="result">

        </div>
        <script type="text/javascript">
            var div1 = document.getElementById("div1");
            var result = document.getElementById("result");
            //var bgc = div1.style.backgroundColor;  //仅能获取内嵌样式
            var bgc = "";
            var padding = "";
            if(div1.currentStyle) {
                //IE support
                bgc = div1.currentStyle.backgroundColor;
                //padding = div1.currentStyle.padding;
                padding = div1.currentStyle["paddingTop"];
            } else {
                bgc = window.getComputedStyle(div1,null).getPropertyValue("background-color");
                //padding = window.getComputedStyle(div1,null).getPropertyValue("padding"); //不用使用padding，应使用padding-top等
                padding = window.getComputedStyle(div1,null)["padding-top"];
            }
            
            result.innerHTML += "backgroundColor:" +  bgc + "<br />";
            result.innerHTML += "padding:" +  padding + "<br />";
            
            function getStyle(targetEle, styleAttribute) {
                if(targetEle.currentStyle) {
                    //IE support
                    var styleProperty = styleAttribute;
                    if(styleAttribute.indexOf("-")!=-1){
                        styleProperty = styleAttribute.substring(0,styleAttribute.indexOf("-")) + styleAttribute.charAt(styleAttribute.indexOf("-")+1).toUpperCase() + styleAttribute.substring(styleAttribute.indexOf("-") + 2);
                    }
                    return targetEle.currentStyle[styleProperty];
                } else {
                    return window.getComputedStyle(targetEle,null).getPropertyValue(styleAttribute);
                }
            }
            alert(getStyle(div1,"padding-left"));
        </script>
    </body>
</html>
